<script>
// 账套模态表单页
Vue.component('tally-form', {
    template: `
<el-dialog :visible.sync="dialogShow" width="800px" @close="closeModal">
    <h3 slot="title">
        <span v-if="tallyForm.id">编辑账套</span>
        <span v-else>新增账套</span>
    </h3>
    <el-form ref="form" :rules="tallyRules" :model="tallyForm" label-width="80px">
        <el-form-item v-if="tallyForm.id" class="hidden">
        <el-input v-model="tallyForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="账本名称" prop="title" required>
        <el-input autocomplete="off" v-model="tallyForm.title" required></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
        <el-input autocomplete="off" v-model="tallyForm.company_title"></el-input>
        </el-form-item>
        <el-form-item label="所在地">
        <el-cascader
        size="large"
        :options="areaOptions"
        v-model="areaSelectedOptions"
        @change="handleAreaChange"
        >
        </el-cascader>
        </el-form-item>
        <el-form-item label="财务人员">
        <el-radio-group v-model="tallyForm.financial_type">
        <el-radio :label="1">仅有会计</el-radio>
        <el-radio :label="2">会计与出纳</el-radio>
        </el-radio-group>
        <p>
           <el-alert v-if="tallyForm.financial_type == '1'"
            :closable="false" class="nopad"
            title="账单不会进入审核流程"
            type="info">
           </el-alert>
            <el-alert v-if="tallyForm.financial_type == '2'"
            :closable="false" class="nopad"
            title="会计录入账单会进入审核流程，出纳角色或管理员可进行审核"
            type="info">
           </el-alert>
        </p>
        </el-form-item>
        <el-form-item label="所属行业">
        <el-cascader
        v-model="tallyForm.industry"
        :options="industryOptions" style="width:260px;">
        </el-cascader>
        </el-form-item>
        <el-form-item label="账本备注">
        <el-input autocomplete="off" v-model="tallyForm.memo"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消 </el-button>
        <el-button type="primary" @click="handleTallyForm">确 定</el-button>
    </div>
</el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        industryOptions() {
            return this.$store.state.industryOptions
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                if(newVal) {
                    this.tallyForm = newVal
                    if(this.tallyForm.hasOwnProperty('province')) {
                        this.areaSelectedOptions = this.convertTextToCode(this.tallyForm.province,this.tallyForm.city) //赋值
                    }
                }
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            areaOptions: provinceAndCityData,
            areaSelectedOptions:[],
            tallyForm:{
                financial_type:1
            },
            tallyRules: {
                title: [
                    { required: true, message: '请输入账本名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        closeModal(){
            this.$emit('modalClose')
        },
        convertTextToCode(provinceText, cityText, regionText) {
            let code = [];
            if (provinceText && TextToCode[provinceText]) {
                const province = TextToCode[provinceText];
                code[0] = province.code;
                if (cityText && province[cityText]) {
                    const city = province[cityText];
                    code[1] = city.code;
                    if (regionText && city[regionText]) {
                        code[2] = city[regionText].code;
                    }
                }
            }
            return code;
        },
        handleAreaChange(value){
            console.log(this.areaSelectedOptions)
            // 省
            console.log(CodeToText[value[0]])
            // 市
            console.log(CodeToText[value[1]])
            // 区域转地址码convertTextToCode(CodeToText[selectedOptions3[0]]
            console.log(value)
        },
        handleTallyForm(){
            let that = this
            let postUrl;
            let isAdd = false
            if(that.tallyForm.id) {
                postUrl = '/api/tally/edit'
            }else{
                isAdd = true
                postUrl = '/api/tally/add'
            }
            that.tallyForm.province = CodeToText[this.areaSelectedOptions[0]] ; //转省
            that.tallyForm.city = CodeToText[this.areaSelectedOptions[1]] ;//转市
            axios.post(postUrl,that.tallyForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '数据保存成功'
                    });
                    // 如果是新增 触发刷新账本列表
                    if(isAdd) {
                        that.$store.dispatch('getTallyList')
                    }
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
